<template>
  <div id="center">
    <div class="down">
      <div class="ranking bg-color-black">
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
      </div>
      <div class="percent">
        <div class="water item bg-color-black">
          <span>CII Limited Year</span>
          <dv-water-level-pond class="dv-wa-le-po" :config="limited" />
        </div>
        <div class="item bg-color-black">
          <!-- <span>{{ deliveryYear }}</span> -->
          <span>Attained</span>
          <span>EEDI/EEXI</span>
          <span>g CO2/(t nm)</span>
          <dv-digital-flop class="dv-dig-flop" :config="attained" />
        </div>
        <div class="item bg-color-black">
          <span>Below Ref.Line</span>
          <CenterChart
            class="chart"
            :id="belowRef.id"
            :tips="belowRef.tips"
            :colorObj="belowRef.colorData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from "@/components/echart/center/centerChartRate";

export default {
  data() {
    return {};
  },
  computed: {
    deliveryYear: function() {
      let year = "";
      try {
        year = this.$store.state.setting.lastSEIASData.selectModel.deliveryYear;
      } catch (error) {
        console.log(error);
      }
      return year;
    },
    attained: function() {
      let attEEDI = 0;
      try {
        attEEDI = this.$store.state.setting.lastSEIASComputed.attEEDI;
      } catch (error) {
        console.log(error);
      }
      return {
        number: [isNaN(attEEDI) ? 0 : attEEDI],
        toFixed: 2
      };
    },
    belowRef: function() {
      let reduc = 0;
      try {
        reduc =
          this.$store.state.setting.lastSEIASComputed.reducEEDIRefLine * 100;
      } catch (error) {
        console.log(error);
      }
      return {
        id: "ref",
        tips: Number(reduc.toFixed(0)),
        colorData: {
          textStyle: "#67e0e3",
          series: {
            color: ["#faf3a378", "transparent"],
            dataColor: {
              normal: "#ff9800",
              shadowColor: "#fcebad"
            }
          }
        }
      };
    },
    limited: function() {
      let limitedYearCII = 0;
      try {
        limitedYearCII = this.$store.state.setting.lastSEIASComputed
          .limitedYearCII;
      } catch (error) {
        console.log(error);
      }
      return {
        data: [limitedYearCII],
        shape: "roundRect",
        formatter: "After {value}",
        waveNum: 3
      };
    },
    ranking: function() {
      let econData = [];
      try {
        econData = [
          {
            name: "Ship name",
            value: this.$store.state.setting.lastSEIASData.vesselModel.shipName
          },
          {
            name: "Ship type",
            value: this.$store.state.setting.lastSEIASData.selectModel.shipType
          },
          {
            name: "Operating start year",
            value: this.deliveryYear
          },
          {
            name: "Operating cycle",
            value:
              this.$store.state.setting.lastSEIASComputed.economicNewbuilding
                .totalOperatingCycle + " (Y)"
          },
          {
            name: "Fuel mode",
            value: this.$store.state.setting.lastSEIASData.selectModel.fuelMode
          },
          {
            name: "Speed @ laden",
            value:
              this.$store.state.setting.lastSEIASData.targetModel.speedLaden +
              " (kn)"
          },
          {
            name: "Speed @ ballast",
            value:
              this.$store.state.setting.lastSEIASData.targetModel.speedBallast +
              " (kn)"
          }
        ];
        let fuel = this.$store.state.setting.lastSEIASData.decarbonModel
          .fuelSolu;
        let fuelType = [...new Set([...fuel.mainFuel, ...fuel.dualFuel])]
          .filter(v => v !== "None")
          .forEach((value, index) =>
            econData.push({
              name: "Fuel type " + (index + 1),
              value: value
            })
          );
      } catch (error) {
        console.log(error);
      }
      return {
        data: econData,
        sort: false,
        rowNum: 8,
        carousel: "single",
        unit: ""
      };
    }
  },
  components: {
    CenterChart
  }
};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span,
        .chart {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 100px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
